<template>
  <el-form class="durg-batch-import">
    <el-form-item label="导入说明：">
      <span>请下载模板，填写完成后再上传文件</span>
      <el-link target="_blank" :href="downUrl" :underline="false">下载文件模板</el-link>
    </el-form-item>
    <el-form-item label="药品类型">
      <el-select
        v-model="postData.flag"
        clearable
        size="small"
        placeholder="请选择类型"
      >
        <el-option
          v-for="item in drugTypes"
          :key="item.id"
          :label="item.text"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上传文件">
      <el-upload
        ref="upload"
        class="upload-demo"
        name="file"
        :action="uploadUrl"
        :auto-upload="false"
        :headers="headers"
        :on-success="onSuccess"
        :on-error="onError"
        :before-upload="onBeforeUpload"
        :data="postData"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此区域</div>
        <el-button size="small">上传文件</el-button>
        <div class="upload-hint" slot="tip">
          <i class="el-icon-warning-outline"></i>
          文件仅支持xls/xlsx格式的文件
        </div>
      </el-upload>
    </el-form-item>
    <div class="dialog-footer">
      <el-button @click="$emit('cancel')">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">提交</el-button>
    </div>
  </el-form>
</template> 
<script>
import { getToken } from '@/utils/auth';

export default {
  name: "batchImport",
  inheritAttrs: false,
  data() {
    let baseUrl = process.env.VUE_APP_BASE_API;
    return {
      drugTypes: [
        { id: 1, text: "西药、中成药" },
        { id: 2, text: "中药饮片、配方颗粒与敷贴" },
        { id: 3, text: "耗材" }
      ],
      headers: {
        Authorization: getToken()
      },
      uploadUrl: baseUrl + "/drug/batchsave",
      postData: {
        flag: null
      },
      loading: false,
      downUrl: "https://oss-cdn.zynk985.com/zynk985/upload/20211231/5aabf5a541b8369f2d6d5e1c80fd91ac.zip"
    }
  },
  methods: {
    onSubmit() {
      if(!this.postData.flag) {
        this.$message.error('请选择药品类型!');
        return;
      }
      if(this.$refs.upload.uploadFiles.length === 0) {
        this.$message.error('请选择文件!');
        return;
      }
      this.loading = true;
      this.$refs.upload.submit();
    },
    onBeforeUpload(file) {
      let isPic =
        file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isPic) {
        this.$message.error('上传文件只能是xls、xlsx格式!');
        this.loading = false;
        return false;
      }
      return isPic;
    },
    onSuccess() {
      this.$notify({
        title: "药品批量导入成功",
        type: "success"
      });
      this.loading = false;
      this.$refs.upload.clearFiles();
      this.$emit("success");
    },
    onError(error) {
      console.error(error);
      this.loading = false;
      let msg = '请求失败';
      if(error.message.indexOf("{\"status") === 0) {
        msg = JSON.parse(error.message).message;
      }
      this.$notify({
        title: msg,
        type: 'error'
      });
    }
  }
}
</script>

<style>
.durg-batch-import .el-form-item {
  margin-left: 25px;
  display: flex;
}

.durg-batch-import .el-form-item__label {
  width: 90px;
}

.durg-batch-import .upload-hint {
  color: #ff8432;
  font-size: 14px;
}

.durg-batch-import .dialog-footer {
  text-align: center;
}

.durg-batch-import .el-upload-dragger .el-icon-upload {
  margin: 20px 0 10px;
}

.durg-batch-import .el-upload-dragger .el-button {
  margin-top: 5px;
}

.durg-batch-import .el-link {
  border: 1px solid #DCDFE6;
  background: #fff;
  padding: 0 15px;
  font-size: 12px;
}
</style>